Tooltips Guidelines 工具指導規則
Usage 用法
工具提示為使用者介面元素提供額外的上下文資訊。
Plain tooltips 普通工具提示
普通工具提示用簡單的文字說明介面元素的用途。它主要用於沒有文字說明的介面元素上,比如只有圖示的按鈕或輸入框,幫助使用者理解這些元素的功能。
Rich tooltips 豐富的工具提示
豐富的工具提示能讓使用者更好地理解介面元素。它可以包含小標題、按鈕和連結。當你需要展示比較詳細的說明或解釋時,使用這種工具提示最合適。

Anatomy 結構
Plain tooltip 普通工具提示

Supporting text 輔助文字
Rich tooltip 豐富的工具提示

Subhead (optional) 副標題(可選)
副標題要簡單明瞭,最好只有一行。副標題的作用是概括工具提示的主要內容。特別是在工具提示自動顯示時(比如頁面剛載入時),一個好的副標題能幫助使用者快速理解資訊。
Text buttons (optional) 文字按鈕(可選)
富文字工具提示可以包含最多兩個按鈕。按鈕上的文字要短且清晰,並且要和提示內容有關。把按鈕放在同一行,不要上下堆放。

Placement 放置位置
Plain tooltips 普通工具提示
普通工具提示會顯示在介面元素的正上方。
- 當有按鈕這樣的可見邊框時,工具提示會距離元素頂部 4dp
- 當是文字這樣沒有邊框的元素時,工具提示會距離元素頂部 8dp
特殊情況:如果元素在頁面頂部的工具欄中,工具提示會改為顯示在元素下方,保持相同的間距。

Rich tooltips 富文字工具提示
富文字工具提示會顯示在介面元素的右下方。它會自動調整位置,確保不會超出螢幕邊緣,也不會遮擋住原來的介面元素。
Dynamic positioning 動態定位:為了保持在螢幕範圍內,工具提示會每次移動8個畫素點來調整位置。
Desktop placement 桌面放置:在電腦桌面版本中,工具提示通常會顯示在介面元素的正下方中間位置。只要滑鼠保持在目標區域內,工具提示就會一直顯示。

Behavior 行為
要顯示工具提示,請在桌面上懸停在父元素上,或在移動裝置上點選並按住該元素。永續性富工具提示僅在點選或輕觸時出現。
Transient by default 預設情況下為臨時顯示
當你移開滑鼠或手指後,所有型別的工具提示會在1.5秒內自動消失。如果你觸發了新的工具提示,已經顯示的工具提示會馬上關閉。

Persistent rich tooltips 持久豐富工具提示
持久豐富工具提示會在兩種情況下顯示:
- 當使用者點選某個介面元素時
- 當頁面剛載入並需要介紹新功能時
這種工具提示有個特點:即使使用者的滑鼠或手指離開了原來的位置,提示也會繼續顯示。只有當使用者點選或觸碰介面上的其他內容時,提示才會消失。注意,滑鼠懸停在元素上並不會觸發這類提示。
這種提示最適合用來介紹新功能,比如在頁面剛載入時向使用者展示新特性。但要注意:不建議在只有圖示的按鈕上使用這種永續性提示。

Interaction & style 互動與樣式
無需執行操作的純文字和富文字工具提示應在螢幕上保留足夠長的時間,以便使用者接收資訊,而不會干擾他們當前的操作流程或任務。
工具提示會在你把滑鼠放在按鈕或導航欄上時顯示。記住一點:工具提示不能擋住重要內容。如果你想看到更詳細的工具提示,可以直接點選元素,而不是用滑鼠懸停。









